<template>
	<view class="page">
		<view class="u-wrap">
			<!-- 搜索框 -->
			<view class="banner"
				style="background-image: url('https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/wayu/nwork42.png')">
				<view class="banner-s">
					<u-search placeholder="搜索你想要的功能" v-model="keyword" :animation="false" :showAction="false"
						@input="autoSearch()" :clearabled="false" :customActionStyle="customActionStyle" />
				</view>
			</view>
			<view class="boox-s">
				<view class="hotlist">
					<view class="hotitem" v-for="(item,index) in hotlist" :key="index" @click="goSeting(item,index)">
						<image class="hotimg" :src="item.image" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view class="hottitle">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<!-- 内容 -->
				<view class="u-menu-wrap">
					<!-- <scroll-view scroll-y> -->
					<!-- 热门功能 -->
					<!-- 	<view class="hot-tool">
							热门功能
						</view> -->


					<!-- 常用功能 -->
					<view class="hot-tool hot-tools">
						实用功能
					</view>
					<view class="toolslist" v-if="keyword.length == 0">
						<view class="toolslist-item" v-for="(item,index) in toolslist" :key="index"
							@click="gotolist(item,index)">
							<view class="toolslist-item-top">
								<image :src="item.image" mode=""></image>
								<view class="toolslist-item-bottom">
									<view class="toolslist-item-title">
										{{item.title}}
									</view>
									<!-- <view class="toolslist-item-desc">
											{{item.desc}}
										</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="toolslist" v-else>
						<view class="toolslist-item" v-for="(item,index) in newList" :key="index"
							@click="gotolist(item,index)">
							<view class="toolslist-item-top">
								<image :src="item.image" mode=""></image>
								<view class="toolslist-item-bottom">
									<view class="toolslist-item-title">
										{{item.title}}
									</view>
								<!-- 	<view class="toolslist-item-desc">
										{{item.desc}}
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
				</view>
			</view>
			<view class="footer">

			</view>
		</view>

	</view>
</template>
<script>
	import {
		myShowLoading,
		myHideLoading,
	} from "../../utils/showToast.js";
	import {
		apiMixUrlKeyApi,
		apiMixUrlApi
	} from "../../api/assemb";
	import store from '../../store/idnex.js';
	import {
		toolist
	} from "@/api/record.js";

	export default {
		data() {
			return {
				hotlist: [{
						id: 151,
						tab: 3,
						content: '建设新农村',
						zt: '公文标题',
						title: '公文写作',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/wayu/nwork3.png',
					},
					{
						title: '行政通知',
						desc: '标准的行政通知',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/wayu/nwork1.png',
						id: 152,
						tab: 3,
						zt: '行政内容',
						content: '春节放假通知',
					},
					{
						title: '工作计划',
						desc: '让老板刮目相看',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/wayu/nwork2.png',
						id: 153,
						zt: '岗位',
						nr: '工作内容',
						tab: 2, //2表示不带字数的两行内容 
						tabs: '新媒体运营',
						tablist: '写公众号推文'
					},
					{
						title: '工作汇报',
						desc: '工作汇报不头疼',
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/wayu/nwork4.png',
						id: 156,
						zt: '岗位',
						nr: '工作',
						tab: 2, //2表示不带字数的两行内容 
						tabs: '产品经理',
						tablist: '绘制产品流程图'
					}
				],
				toolslist: toolist,
				newList: '',
				keyword: '',
				screenHeight: 0
			}
		},
		onShareAppMessage(res) {
			const that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target, 'res.target')
			}
			return {
				title: 'AI写作神器，一键改写变原创。',
				path: "pages/home/home?userid=" + that.userid,
				imageUrl: "https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/xze/6.png",
				success: function(res) {
					console.log(
						"--------------转发成功--------------------",
						res,
						that.userid
					);
				}
			}
		},
		onLoad() {

		},
		mounted() {
			console.log(uni.getSystemInfoSync(), '111111111111111')
			this.screenHeight = uni.getSystemInfoSync().windowHeight
		},
		onShow() {},
		methods: {
			//热门功能跳转
			goSeting(item, index) {
				console.log(item)
				if (item.tab == 3) {
					uni.navigateTo({
						url: '/pages_otherTools/peoper/peoper?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.content,
					})
				} else if (item.tab == 2) {
					uni.navigateTo({
						url: '/pages_otherTools/invitation/invitation?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.tablist + '&tab=' + item.tabs +
							'&nr=' + item.nr,
					})
				} else {
					uni.navigateTo({
						url: '/pages_otherTools/natework/natework'
					})
				}
			},
			//常用功能跳转
			gotolist(item, index) {
				if (item.tab == 0) {
					uni.navigateTo({
						url: '/pages_otherTools/rectification/rectification?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.content,
					})
				} else if (item.tab == 1) {
					console.log('1')
					uni.navigateTo({
						url: '/pages_otherTools/assembly/assembly?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.tablist + '&tab=' + item.tabs +
							'&nr=' + item.nr,
					})
				} else if (item.tab == 2) {
					uni.navigateTo({
						url: '/pages_otherTools/invitation/invitation?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.tablist + '&tab=' + item.tabs +
							'&nr=' + item.nr,
					})
				} else if (item.tab == 3) {
					console.log('3')
					uni.navigateTo({
						url: '/pages_otherTools/peoper/peoper?title=' + item.zt + '&footer=' + item
							.title + '&id=' + item.id + '&content=' + item.content,
					})
				} else if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
				console.log(item)
			},
			
			autoSearch() {
				let that = this
				let cont = this.toolslist
				this.newList = ''

				var arr = []; //定义数组
				for (var i in cont) {
					arr.push(cont[i]);
				}

				console.log(arr, '8888888888')
				var list2 = [];
				// var list3 = [];
				arr.forEach((item1, index) => {
					if (that.keyword == '') {
						// console.log('这里走了没有')
						return
					}
					if (item1.title.indexOf(that.keyword) == -1) {
						// console.log('走到这里了·')
						// this.newList = ''

					} else {
						console.log(item1)
						list2.push(item1);
						// list3.push(index)
						// that.cenr = true
						// console.log(true)
						this.newList = list2
					}

				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-search__content {
		height: 82rpx !important;
		// border: none !important;
		// border-color: rgba(0, 0, 0, 0) !important;
		background-color: white !important;
	}

	/deep/.u-search__content__input {
		background-color: white !important;
		// background-color: rgba(0, 0, 0, 0) !important;
	}

	.banner {
		background-repeat: no-repeat;
		background-size: cover;
		top: 0;
		height: 350rpx;
		width: 100%;
		margin-top: -35rpx;

		.banner-s {
			width: 700rpx;
			margin: 0 auto;
			margin-top: 270rpx;
		}
	}

	.hotlist {
		display: flex;
		justify-content: space-between;
		margin: 0 10rpx;
		margin-top: 39rpx;
		justify-content: space-around;

		.hotitem {
			text-align: center;
		}

		.hotimg {
			width: 88rpx;
			height: 88rpx;
		}

		.hottitle {
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.topsize {
		background-color: #F5F5F5;
		width: 100%;
		flex: 1;
		display: flex;
		overflow: hidden;
		padding-bottom: 30rpx;
		padding-top: 360rpx;
		z-index: -1;
	}

	.toolslist {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.toolslist-item {
			width: 23%;
			background: #FFFFFF;
			border-radius: 18rpx;
			// margin-top: 20rpx;
			.toolslist-item-top {
				align-items: center;
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;

				image {
					width: 84rpx;
					height: 84rpx;
				}

				.toolslist-item-bottom {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					.toolslist-item-title {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #332F2F;
					}

					.toolslist-item-desc {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 5rpx;
					}
				}
			}
		}
	}

	.u-wrap {
		// height: calc(100vh);
		// /* #ifdef H5 */
		// height: calc(100vh - var(--window-top));
		// /* #endif */
		display: flex;
		flex-direction: column;
		background: #f8f8f8;

		.boox-s {
			margin: 30rpx;
			height: 199rpx;
			background: #fefefe;
			opacity: 1;
			margin-top: 30rpx;
		}
	}

	.u-menu-wrap {
		// height: 69vh;
		// flex: 1;
		// display: flex;
		overflow: hidden;
		// margin: 0 26rpx;
		padding-bottom: 20rpx;
	}

	.bottom-box {
		background: #FFFFFF;
		border: 2px solid #FFFFFF;
		box-shadow: 5rpx 5rpx 66rpx 0rpx #EAF3FF;
		margin: 30rpx;
		margin-top: -6rpx;
		// position: absolute;
		// top: 315rpx;

	}

	.hot-tool {
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 30rpx;
	}

	.hot-tools {
		margin-top: 45rpx;
		margin-left: 34rpx;
	}


	.footer {
		width: 100%;
		height: 40rpx;
		background: #f8f8f8;
	}
</style>